<!-- 雷达图 -->
<template>
  <el-card>
    <template #header> 检测数量排行榜 </template>
    <div :id="id" :class="className" :style="{ height, width }"></div>
  </el-card>
</template>

<script setup lang="ts">
import * as echarts from "echarts";
import DashboardAPI from "@/api/dashboard";

const props = defineProps({
  id: {
    type: String,
    default: "radarChart",
  },
  className: {
    type: String,
    default: "",
  },
  width: {
    type: String,
    default: "200px",
    required: true,
  },
  height: {
    type: String,
    default: "200px",
    required: true,
  },
});

const options = {
  dataset: {
    source: [],
  },
  tooltip: {
    trigger: "axis",
    axisPointer: {
      type: "shadow",
    },
  },
  grid: { left: "0px", right: "70px", containLabel: true },
  xAxis: { name: "检测数量" },
  yAxis: { name: "网格员", type: "category" },
  series: [
    {
      type: "bar",
      encode: {
        // Map the "amount" column to X axis.
        x: "数量",
        // Map the "product" column to Y axis
        y: "名称",
      },
      itemStyle: {
        color: "#007bff", // 科技蓝颜色
        borderRadius: [0, 10, 10, 0], // 圆角设置，分别为[左上角, 右上角, 右下角, 左下角]
        borderColor: "#fff", // 可选：边框颜色
        borderWidth: 1, // 可选：边框宽度，确保柱子粗细一致
      },
    },
  ],
};

const chart = ref<any>("");

function reqData() {
  DashboardAPI.query2().then((res) => {
    options.dataset.source = [];
    let i = 0;
    res.reverse();
    for (const v of res) {
      if (i >= 6) {
        break;
      }
      options.dataset.source.unshift([v.count, v.sname]);
      i++;
    }
    chart.value.setOption(options);
  });
}

onMounted(() => {
  chart.value = markRaw(
    echarts.init(document.getElementById(props.id) as HTMLDivElement)
  );
  reqData();
  setInterval(() => {
    reqData();
  }, 5000);
  window.addEventListener("resize", () => {
    chart.value.resize();
  });
});

onActivated(() => {
  if (chart.value) {
    chart.value.resize();
  }
});
</script>
